<template>
  <div class="home-page">
    <div v-if="!pcLoading">
      <page-list-layout>
        <template v-slot:one>
          <HomepageHeader
              :userInfoHeader="userInfoHeader"
              :myself-or-other="myselfOrOther"
              @sendTextFn="sendTextFn"
              @getUserInfoFn="getUserInfoFn"
              @editTypeAction="editTypeAction"
          />
        </template>
        <template v-slot:two>
          <MusicTime v-if="userInfoHeader.peopleCanSeeMyPlayRecord" :user-info="userInfoHeader"
                     :myselfOrOther="myselfOrOther"/>
        </template>
        <template v-slot:three>
          <CreateRadio :user-info="userInfoHeader?.profile"/>
        </template>
        <template v-slot:four>
          <CreatePlaylist :myselfOrOther="myselfOrOther" :profile="userInfoHeader?.profile"/>
        </template>
        <template v-slot:top>
          <FansList
              v-if="typeAction !== 2"
              @sendTextFn="sendTextFn"
              :userInfoHeader="userInfoHeader"
              :typeAction="typeAction"
          />
          <DynamicInfo
              v-else
              :userInfoHeader="userInfoHeader"
          />
        </template>
      </page-list-layout>
      <share-popup
          ref="sharepopupExamples"
          :sharePlayerInfo="sharePlayerInfo"
          :repeatType="true"
          :checkedFanA="checkedFanA.length > 0 ? checkedFanA : [userInfoHeader?.profile?.userId]"
          :isShareType="false"
          :isShareSong="false"
          isPopupTitle="发送"
      />
    </div>
    <loading v-else/>

  </div>
</template>

<script setup>
import {computed, inject, reactive, toRefs, watch, watchEffect} from "vue"
import {useRoute} from "vue-router"
import {ref} from "vue";
import {useStore} from "@/store/index";

import PageListLayout from '@/components/PageListLayout/index.vue'
import HomepageHeader from './components/HomepageHeader/index.vue'
import MusicTime from './components/MusicTime/index.vue'
import CreatePlaylist from './components/CreatePlaylist/index.vue'
import CreateRadio from './components/CreateRadio/index.vue'
import FansList from './components/FansList/index.vue'
import DynamicInfo from '@/components/DynamicInfo/index.vue'


const route = useRoute()
const store = useStore()

// 页面级依赖注入不会刷新整个页面
const reloadPage = inject('reloadPage')

const sharepopupExamples = ref()

const data = reactive({
  userInfoHeader: {}, // 用户头部信息
  pcLoading: false, // loading
  checkedFanA: [], // 用于将私信弹窗存储当前用户在插入一个id
  typeAction: 1, // 用于判断是动态 2 还是 粉丝 1 还是关注 0
  sharePlayerInfo: {
    shareType: 'text'
  } // 分享存储的信息  user_ids  msg
})
const {userInfoHeader, pcLoading, sharePlayerInfo, checkedFanA, typeAction} = toRefs(data)

// 判断是我自己进入主页还是其他用户
const myselfOrOther = computed(() => {
  return store.userInfo.userId === Number(route.query.id)
})
data.checkedFanA = []
// 子组件点击关注之后数据改变重新请求数据
const getUserInfoFn = () => {
  getUserInfo()
}

// 发送私信
const sendTextFn = (id) => {
  // 如果id存在就将id存入checkedFanA
  if (id) data.checkedFanA = [id]
  else data.checkedFanA = [data.userInfoHeader?.profile?.userId]

  sharepopupExamples.value.yuPopupA()
  console.log(data.checkedFanA)
}

const getUserInfo = () => {
  store.getUserInfo(route.query.id).then(res => {
    data.pcLoading = false // 关闭loading
    data.userInfoHeader = res
    // console.log(res)
  })
}
// 开启loading
data.pcLoading = true

// 获取用户信息
getUserInfo()

// 操作typeAction类型
const editTypeAction = (type) => {
  data.typeAction = type
}


// 由于路由跳转同一页面不会刷新但是路由会改变所以监听路由变化使用，依赖注入刷新页面
// TODO:这样导致刷新的时候播放器会暂停(在layout页面中注册依赖注入刷新这样就不会导致播放器暂停播放了)
watch(route, () => {
  reloadPage()
})
// 判断跳转路由时是否存在type
watchEffect(() => {
  if (route.query.type) editTypeAction(+route.query.type)
})

</script>

